<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>   
<form method="post" id="form">
  
  <div class="form-group">
    <label for="articleTitle">标题</label>
    <input type="Text" class="form-control" name="title" id="title" aria-describedby="titleHelp">
    <small id="titleHelp" class="form-text text-muted">请输入文章的标题.</small>
  </div>
  <div class="form-group">
    <label for="channelSelect">文章栏目</label>
    <select class="form-control" id="channelSelect" name="channelId" onchange="channelChange()">
     <c:forEach items="${channels}" var="channel">	
      	<option value="${channel.id}">${channel.name}</option>
      </c:forEach>
    </select>
  </div>
  <div class="form-group">
    <label for="channelSelect">文章分类</label>
    <select class="form-control" name="categoryId" id="catSelect">
      <option>1</option>
    </select>
  </div>
  
  <div class="form-group">
    <label for="pictureid">标题图片</label>
    <input type="file" class="form-control-file"  name="file" id="pictureid">
  </div>
  
   <div class="mb-3">
    <label for="validationTextarea">文章的内容</label>
    <textarea class="form-control is-invalid" name="content1" id="validationTextarea" placeholder="Required example textarea" required></textarea>
    <div class="invalid-feedback">
     		请输入文章内容
    </div>
  </div>
   

<input type="button" class="btn btn-primary btn-lg"  onclick="addArticle()" value="提交" />

<script type="text/javascript">
	var editor1 ;
	function channelChange(){
		var channelId=$("#channelSelect").val()
		alert(channelId)
		 $.post("/article/listCatByChannel",{channelId:channelId},function(data){
			$("#catSelect").empty();
			$.each(data, function(index,chnl){
				$("#catSelect").append("<option value='"+data[index].id+"'> " +data[index].name + " </option>")	
			})
		},"json"); 
	}
	
	function addArticle(){
		
		var formdata=new FormData($("#form")[0]);
		formdata.append("content",editor1.html())
		
	 	$.ajax({
	           type:'post',
	           url:'/user/addArticle',
	           data:formdata,
	           cache:false,
	           processData:false, // 不处理发送的数据，因为data值是Formdata对象，不需要对数据做处理
	           contentType:false, // 不设置Content-type请求头
	           success:function(){
	        	   alert("发布成功")
	           },
	           error:function(){ }
	       }) 
		
	}
	
	$(function(){
	KindEditor.ready(function(K) {
		editor1 = K.create('#validationTextarea', {
			cssPath : '/resource/kindeditor/plugins/code/prettify.css',
			uploadJson : '/file/uploads.do',
			fileManagerJson : '/file/manager',
			allowFileManager : true,
			afterCreate : function() {
				var self = this;
				K.ctrl(document, 13, function() {
					self.sync();
					document.forms['example'].submit();
				});
				K.ctrl(self.edit.doc, 13, function() {
					self.sync();
					document.forms['example'].submit();
				});
			}
		});
		prettyPrint();
	});
	})
	
	
	

</script>
  
  
  
</form>